<template>
    <div>
        <form action="/">
        <van-search
            v-model="value"
            show-action
            placeholder="搜索"
            @search="onSearch"
            @cancel="onCancel"
            background="#EDEDED"
            shape="round"
            autofocus
         />
        </form>
        <div class="content">
            <div class="title">搜索指定内容</div>
            <div class="type-wrapper flex">
                <div class="item" v-for="(item,index) in searchType" :key="index" :class="index%3!==0?'van-hairline--left':''">
                    {{item.name}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    created(){
        this.sendData()
    },
    data() {
        return {
            value:'',
            type:'',
            searchType:[]
        }
    },
    methods:{
        sendData(){
            this.type=this.$route.params.id;
            switch(this.type){
                case 'all':this.searchType=[{
                    name:'朋友圈',
                    event:''
                },
                 {
                    name:'文章',
                    event:''
                },
                 {
                    name:'公众号',
                    event:''
                },
                 {
                    name:'小程序',
                    event:''
                },
                 {
                    name:'音乐',
                    event:''
                },
                 {
                    name:'表情',
                    event:''
                }];
                break;
                case 'foundChatRecord':this.searchType=[{
                    name:'群成员',
                    event:''
                },
                 {
                    name:'日期',
                    event:''
                },
                 {
                    name:'图片及视频',
                    event:''
                },
                 {
                    name:'文件',
                    event:''
                },
                 {
                    name:'链接',
                    event:''
                },
                 {
                    name:'音乐',
                    event:''
                },
                {
                    name:'交易',
                    event:''
                },
                 {
                    name:'小程序',
                    event:''
                }];
                break;
            }
        },
        onSearch(){

        },
        onCancel(){
           this.$router.go(-1);
        }
    }
}
</script>
<style scoped>
.van-search__action{
    color: #5C698E;
}
.content{
    padding: 2rem;
}
.type-wrapper{
    flex-wrap: wrap;
}
.title{
    width: 100%;
    font-size: .6rem;
    color: #A8A8A8;
    text-align: center;
}
.item{
    width: 33%;
    margin-top: 1rem;
    box-sizing: border-box;
    font-size: .5rem;
    color: #5A6D91;
    text-align: center;
}
</style>